<template>
  <view class="animated fadeIn faster" style="min-height: 100vh;">
    <view class="message-list">
      <view
          v-for="(category, categoryIndex) in messageCategories"
          :key="categoryIndex"
          class="message-category mb-2"
      >

        <!-- 该分类下的消息列表 -->
        <view
            v-for="(message, messageIndex) in category.messages"
            :key="messageIndex"
            class="message-item mb-2 rounded10"
            @click="readMessage(message)"
        >
          <view class="d-flex d-flex-middle">
            <view
                class="rounded60 d-flex d-flex-middle d-flex-center"
                :style="{background: category.bgColor, width: '100rpx', height: '100rpx'}"
            >
              <text
                  class="iconfont font56"
                  :class="category.icon"
                  :style="{color: category.iconColor}"
              ></text>
            </view>
            <view class="d-flex d-flex-column ml-3 d-flex-item">
              <view class="d-flex d-flex-between">
                <text class="category-title font-bold color-92 font30">{{ category.title }}</text>
                <text class="message-time color-92">{{ message.time }}</text>
              </view>
              <view class="message-content font24 mt-2">
                <text>{{ message.content }}</text>
                <text v-if="message.unread" class="unread-dot"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
import {fileApi} from '@/http/fileApi.js';
import store from '@/store/index.js';
import {mapState} from "vuex"

export default {
  data() {
    return {
      messageCategories: [
        {
          type: 'system',
          title: '系统消息',
          icon: 'icon-lingdang',
          bgColor: 'rgba(201, 255, 237, 1)',
          iconColor: 'rgba(62, 142, 254, 1)',
          messages: [
            {
              id: 1,
              content: '您的订单已发货',
              time: '2023-10-15 14:30',
              unread: true
            }
          ]
        },
        {
          type: 'service',
          title: '客服消息',
          icon: 'icon-kefu',
          bgColor: 'rgba(255, 226, 196, 1)',
          iconColor: 'rgba(255, 141, 26, 1)',
          messages: [
            {
              id: 2,
              content: '客服回复了您的问题',
              time: '2023-10-14 09:15',
              unread: false
            }
          ]
        },
        {
          type: 'like',
          title: '互动消息',
          icon: 'icon-tubiao2_yishu_hudongxiaoxi',
          bgColor: 'rgba(255, 218, 209, 1)',
          iconColor: 'rgba(255, 87, 51, 1)',
          messages: [
            {
              id: 3,
              content: '用户点赞了您的评论',
              time: '2023-10-13 16:45',
              unread: true
            }
          ]
        }
      ]
    }
  }
  ,
  computed: {
    ...mapState({
          id: state => state.id,
          openid: state => state.openid,
          avatar: state => state.avatar,
          phone: state => state.phone,
          name: state => state.nickName,
          gender: state => state.gender,
          loginState: state => state.loginState
        })
  }
  ,
  onLoad() {
    let that = this
    if (this.openid == null || this.openid == '') {
      uni.login({
        success: res => {
          that.sendCode(res.code)
        },
        fail: res => {
          console.log(res)
        }
      });
    }
    this.goUserNotifications()
  }
  ,
  // onReady() {
  //   this.formData.user_id = this.id
  //   this.formData.avatar = this.avatar
  //   this.formData.name = this.name
  //   this.formData.gender = this.gender
  // }
  // ,
  methods: {
   async goUserNotifications(){
     let res = await fileApi.getUserNotifications()
    console.log(res,'res')
   },
    getMessageTypeConfig(type) {
      return this.messageTypeConfig.find(config => config.type === type) || this.messageTypeConfig[0];
    }
    ,
    readMessage(item) {
      // 标记为已读逻辑
      item.unread = false;
    }
  }
}
</script>

<style scoped>
.message-list {
  padding: 20rpx;
}

.message-item {
  padding: 20rpx;
  background-color: #fff;
}


.message-title {
  font-weight: bold;
}

.message-time {
  font-size: 24rpx;
}

.message-content {
  position: relative;
  color: #999;
}

.unread-dot {
  position: absolute;
  right: 0;
  top: 30%;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #ff4757;
}

.color-92 {
  color: rgba(92, 92, 92, 1);
}
</style>
